{{define "cp_nav_header"}}
<!-- start: header -->
<header class="header">
    <div class="logo-container">
        <a href="/manage" class="logo">
            <img src="/static/img/avatar.png" height="35" alt="YAGPDB" />
        </a>
        <div class="d-md-none toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html"
            data-fire-event="sidebar-left-opened">
            <i class="fas fa-bars" aria-label="Toggle sidebar"></i>
        </div>
    </div>

    <!-- start: search & user box -->
    <div class="header-right">

        <!-- <form action="pages-search-results.html" class="search nav-form">
            <div class="input-group">
                <input type="text" class="form-control" name="q" id="q" placeholder="Search...">
                <span class="input-group-append">
                    <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
                </span>
            </div>
        </form> -->

        <span class="separator"></span>

        <ul class="notifications">
            <li>
              <a href="/premium-perks" class="notification-icon" data-toggle="tooltip" data-placement="bottom" title=""
                  data-original-title="Premium">
                  <i class="premium-color fas fa-crown"></i>
              </a>
            </li>
            <li>
                <a href="#" onclick="toggleTheme()" target="_blank" class="notification-icon" data-toggle="tooltip"
                    data-placement="bottom" title="" data-original-title="Toggle light/dark theme">
                    <i class="fas fa-lightbulb"></i>
                </a>
            </li>
            <li>
                <a href="https://discord.gg/4udtcA5" target="_blank" class="notification-icon" data-toggle="tooltip"
                    data-placement="bottom" title="" data-original-title="YAGPDB Community and support server">
                    <i class="fab fa-discord"></i>
                </a>
            </li>
            <li>
                <a href="/manage" class="notification-icon" data-toggle="tooltip" data-placement="bottom" title=""
                    data-original-title="News and updates">
                    <i class="far fa-newspaper"></i>
                </a>
            </li>
            <li>
                <a href="https://help.yagpdb.xyz/" class="notification-icon" target="_blank" data-toggle="tooltip"
                    data-placement="bottom" title="" data-original-title="Documentation">
                    <i class="fas fa-question"></i>
                </a>
            </li>
            <li>
                <a href="/status" class="notification-icon" data-toggle="tooltip" data-placement="bottom" title=""
                    data-original-title="Status">
                    <i class="fas fa-exclamation-triangle"></i>
                </a>
            </li>
        </ul>

        <span class="separator"></span>

        {{if .User}}
        <div id="server-selection" class="userbox">
            <a href="#" data-toggle="dropdown">
                <figure class="profile-picture">
                    {{if and .ActiveGuild .ActiveGuild.Icon}}
                    <img src="https://cdn.discordapp.com/icons/{{.ActiveGuild.ID}}/{{.ActiveGuild.Icon}}?size=64"
                        alt="Server Icon" class="rounded-circle" />
                    {{else}}
                    <img src="/static/img/questionmark.png" alt="Server Icon" class="rounded-circle" />
                    {{end}}
                </figure>
                <div class="profile-info" data-lock-name="Server Name">
                    <span class="name">{{if .ActiveGuild}}{{.ActiveGuild.Name}}{{if .IsGuildPremium}}<i
                            class="fas fa-crown premium-color ml-1"></i>{{end}}{{else}}Loading...{{end}}</span>
                    <span class="role">loading....</span>
                </div>
                <i class="fa custom-caret"></i>
            </a>

            <div class="dropdown-menu">
                <ul class="list-unstyled mb-2" style="max-height: 500px; overflow-y: auto;">
                    <li class="divider"></li>

                    <li>
                        <a role="menuitem" tabindex="-1" href="#"><i class="fas fa-wrench"></i>Loading your servers</a>
                    </li>
                    <li>
                        <a role="menuitem" tabindex="-1" href="#"><i class="fas fa-wrench"></i>Please wait, or refresh
                            the page if broken.</a>
                    </li>
                </ul>
            </div>
        </div>

        <script>
        $(function(){
            loadWidget("server-selection", {{if and .ActiveGuild .IsAdmin}}"/manage/{{.ActiveGuild.ID}}/guild_selection"{{else}}"/guild_selection"{{end}});
        });
        </script>

        <span class="separator"></span>

        <div id="userbox" class="userbox">
            <a href="#" data-toggle="dropdown">
                <figure class="profile-picture">
                    {{if .User.Avatar}}<img
                        src="https://cdn.discordapp.com/avatars/{{.User.ID}}/{{.User.Avatar}}?size=64" alt="Joseph Doe"
                        class="rounded-circle" data-lock-picture="img/!logged-user.jpg" />{{end}}
                </figure>
                <div class="profile-info" data-lock-name="{{.User.Username}}" data-lock-email="">
                    <span class="name">{{or .User.Globalname .User.Username}}</span>
                    <span class="role">{{adjective | title}}</span>
                </div>

                <i class="fa custom-caret"></i>
            </a>

            <div class="dropdown-menu">
                <ul class="list-unstyled mb-2">
                    <li class="divider"></li>
                    <li>
                        <a role="menuitem" tabindex="-1" href="/logout"><i class="fas fa-power-off"></i> Logout</a>
                    </li>
                    <li>
                        <a role="menuitem" tabindex="-1" href="/premium"><i class="fas fa-crown"></i> Premium</a>
                    </li>
                </ul>
            </div>
        </div>
        {{else}}
        <div class="userbox">
            <a href="/login?goto={{urlquery .RequestURI}}"><i class="fas fa-power-off"></i> Login with Discord</a>
        </div>
        <span class="separator"></span>
        {{end}}
    </div>
    <!-- end: search & user box -->
</header>
<!-- end: header -->
{{end}}

{{define "cp_nav_sidebar"}}
<style>
    @media(min-width: 768px) {
        #sidebar-left {
            margin-bottom: {{.CurrentAd.Height}}px;
        }
    }
</style>

<!-- start: sidebar -->
<aside id="sidebar-left" class="sidebar-left">

    <div class="sidebar-header">
        <div class="sidebar-title">
            Navigation
        </div>
        <div class="sidebar-toggle d-none d-md-block" data-toggle-class="sidebar-left-collapsed" data-target="html"
            data-fire-event="sidebar-left-toggle">
            <i class="fas fa-bars" aria-label="Toggle sidebar"></i>
        </div>
    </div>

    <div class="nano">
        <div class="nano-content">
            <nav id="menu" class="nav-main" role="navigation">
                <ul class="nav nav-main">
                    {{if and .ActiveGuild .IsAdmin}}
                    {{$ag := .ActiveGuild}}
                    <li>
                        <a class="nav-link" data-partial-load="true" href="/manage/{{.ActiveGuild.ID}}/home">
                            <i class="fas fa-home" aria-hidden="true"></i>
                            <span>Home</span>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link premium-color" data-partial-load="true" href="/manage/{{.ActiveGuild.ID}}/personalizer">
                            <i class="fas fa-user" aria-hidden="true"></i>
                            <span>Personalize</span>
                        </a>
                    </li>
                    {{range (index .SidebarItems "Top")}}
                    {{template "sidebar_item" (dict "ActiveGuild" $ag "Item" .)}}
                    {{end}}
                    <li class="nav-parent">
                        <a class="nav-link" href="#">
                            <i class="fas fa-cogs" aria-hidden="true"></i>
                            <span>Core</span>
                        </a>
                        <ul class="nav nav-children">
                            {{range (index .SidebarItems "Core")}}
                            {{template "sidebar_item" (dict "ActiveGuild" $ag "Item" .)}}
                            {{end}}
                        </ul>
                    </li>
                     <li class="nav-parent">
                        <a class="nav-link" href="#">
                            <i class="fas fa-closed-captioning" aria-hidden="true"></i>
                            <span>Custom Commands</span>
                        </a>
                        <ul class="nav nav-children">
                            {{range (index .SidebarItems "CustomCommands")}}
                            {{template "sidebar_item" (dict "ActiveGuild" $ag "Item" .)}}
                            {{end}}
                        </ul>
                    </li>
                    <li class="nav-parent">
                        <a class="nav-link" href="#">
                            <i class="fas fa-user-shield" aria-hidden="true"></i>
                            <span>Moderation</span>
                        </a>
                        <ul class="nav nav-children">
                            {{range (index .SidebarItems "Moderation")}}
                            {{template "sidebar_item" (dict "ActiveGuild" $ag "Item" .)}}
                            {{end}}
                        </ul>
                    </li>
                    <li class="nav-parent   ">
                        <a class="nav-link" href="#">
                            <i class="fas fa-rss" aria-hidden="true"></i>
                            <span>Notifications & Feeds</span>
                        </a>
                        <ul class="nav nav-children">
                            {{range (index .SidebarItems "Feeds")}}
                            {{template "sidebar_item" (dict "ActiveGuild" $ag "Item" .)}}
                            {{end}}
                        </ul>
                    </li>
                    <li class="nav-parent">
                        <a class="nav-link" href="#">
                            <i class="fas fa-tags" aria-hidden="true"></i>
                            <span>Roles</span>
                        </a>
                        <ul class="nav nav-children">
                            {{range (index .SidebarItems "Roles")}}
                            {{template "sidebar_item" (dict "ActiveGuild" $ag "Item" .)}}
                            {{end}}
                        </ul>
                    </li>
                    <li class="nav-parent">
                        <a class="nav-link" href="#">
                            <i class="fas fa-bolt" aria-hidden="true"></i>
                            <span>Tools & Utilities</span>
                        </a>
                        <ul class="nav nav-children">
                            {{range (index .SidebarItems "Tools")}}
                            {{template "sidebar_item" (dict "ActiveGuild" $ag "Item" .)}}
                            {{end}}
                        </ul>
                    </li>
                
                    <li class="nav-parent">
                        <a class="nav-link" href="#">
                            <i class="fas fa-trophy" aria-hidden="true"></i>
                            <span>Fun</span>
                        </a>
                        <ul class="nav nav-children">
                            {{range (index .SidebarItems "Fun")}}
                            {{template "sidebar_item" (dict "ActiveGuild" $ag "Item" .)}}
                            {{end}}
                        </ul>
                    </li>
                    {{end}}
                    <li class="mt-5">
                        <a class="nav-link" href="https://help.yagpdb.xyz/" target="_blank">
                            <i class="fas fa-question" aria-hidden="true"></i>
                            <span>Documentation</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</aside>
<!-- end: sidebar -->


{{if gt .CurrentAd.Height 0}}
<div id="nav-footer" style="height: {{.CurrentAd.Height}}px;">
    <a href="{{.CurrentAd.LinkURL}}" target="_blank">
        {{if .CurrentAd.VideoUrls}}
        {{$dot := .}}
        <video id="nav-footer-img" autoplay loop muted>
            {{range $i, $v := .CurrentAd.VideoUrls}}
            <source src="/{{$v}}" type="{{index $dot.CurrentAd.VideoTypes $i}}">
            {{end}}
        </video>
        {{else}}
        <img src="/{{.CurrentAd.Path}}" id="nav-footer-img"></img>
        {{end}}
    </a>
</div>
{{end}}
{{end}}

{{define "sidebar_item"}}
{{$ag := .ActiveGuild}}
{{$item := .Item}}
<li>
    <a class="nav-link {{if $item.IsPremium}}premium-color{{end}}" {{if not $item.External}}data-partial-load="true"{{else}}target="_blank"{{end}} href="{{if not $item.External}}/manage/{{$ag.ID}}/{{$item.URL}}{{else}}{{$item.URL}}{{end}}">
        {{if $item.Icon}}<i class="{{$item.Icon}}" aria-hidden="true"></i>{{end}}
        {{if $item.CustomIconImage}}<image src="{{$item.CustomIconImage}}" width="24" class="nav-sidebar-icon-custom mr-1" />{{end}}
        {{if $item.New}}<span class="float-right badge badge-success">New!</span>{{end}}
        <span>{{$item.Name}}</span>
    </a>
</li>
{{end}}


{{define "cp_guild_selection"}}
<a href="#" data-toggle="dropdown">
    <figure class="profile-picture">
        {{if and .ActiveGuild .ActiveGuild.Icon}}
        <img src="https://cdn.discordapp.com/icons/{{.ActiveGuild.ID}}/{{.ActiveGuild.Icon}}?size=64" alt="Server Icon"
            class="rounded-circle" />
        {{else}}
        <img src="/static/img/questionmark.png" alt="Server Icon" class="rounded-circle" />
        {{end}}
    </figure>
    <div class="profile-info" data-lock-name="Server Name">
        <span class="name">{{if .ActiveGuild}}{{.ActiveGuild.Name}}{{if .IsGuildPremium}}<i
                class="fas fa-crown premium-color ml-1"></i>{{end}}{{else}}Select Server{{end}}</span>
        <span class="role">Change server</span>
    </div>

    <i class="fa custom-caret"></i>
</a>

<div class="dropdown-menu">
    <ul class="list-unstyled mb-2" style="max-height: 500px; overflow-y: auto;">
        <li class="divider"></li>

        {{if .ManagedGuilds}}

        {{$clientid := .ClientID}}
        {{$host := .Host}}
        {{$baseURL := .BaseURL}}

        {{range $index, $element := .ManagedGuilds -}}{{if $element.Connected -}}
        <li>
            <a role="menuitem" tabindex="-1" href="/manage/{{$element.ID}}/home">
            {{if $element.Icon}}
                <img src="https://cdn.discordapp.com/icons/{{$element.ID}}/{{$element.Icon}}?size=64" class="rounded-circle server-image"></img>
            {{else}}
                <i class="fas fa-wrench"></i>
            {{end}}
                {{$element.Name}}</a>
        </li>
        {{end}}{{end}}

        <li class="divider"></li>

        {{range $index, $element := .ManagedGuilds -}}{{if not $element.Connected -}}
        <li>
            <a
                href="https://discordapp.com/oauth2/authorize?client_id={{$clientid}}&scope=applications.commands%20bot&permissions=1516122532343&guild_id={{$element.ID}}&response_type=code&redirect_uri={{print $baseURL "/manage"}}"><i
                    class="fas fa-plus"></i>{{$element.Name}}</a>
        </li>
        {{end}}{{end}}
        {{else}}
        <li>
             <a role="menuitem" tabindex="-1" href="#">You do not own or have access to any server's settings.</a>
        </li>
        {{end}}
    </ul>
</div>
<style>
.server-image {
        width: 25px;
        height: 25px;
        margin-right: 3px;
        vertical-align: middle;
}
</style>
{{end}}
